﻿<html>
<head>
<meta charset="gb2312">
<tiyle>经典的两列布局——三行两列宽度固定布局</tiyle>
<style type="text/css">
    body {
        background: #fff;
        font: 13px/1.5 Arila;
        margin:0;
        padding:0;
    }
    P{
        text-indent:2em;
    }
    #header, #pagefooter, #container{
        margin: 0 auto;
        width: 760px; 
    }
    .rounded{
        background: #888;
        width: 100%;
        boeder: #fff solid 1px;
    }
    .rounded h2{
        background: #888;
        padding:20px 20px 10px 20px;
        margin:0;
    }
    .round .main{
        padding:10px 20px;
        margin:-2em 0 0 0;
    }
    .rounded .footer{
        background: #888;
    }

    .rounded .footer p{
        color: #fff;
        text-align:right;
        background: #888;
        display:block;
        padding:10px 20px 20px 20px;
        margin:-2em 0 0 0 ;
    }
    #container{
        position:relative;
    }
     #content{
         position:absolute;
         top:0;
         left:o;
         width:500px;
     }
     #content img{
         float:right;
     }
     #side{
         margin: 0 0 0 500px;
     }
     </style>
    </head>
    <body>
        <div id="header">
        <div class="rounded">
            <h2>Header</h2>
            <div class="main"></div>
            <div class="footer">
                <p>查看详情信息&gt;&gt;</p>
                <div>
                <div>
         <div>
             <div id="container">
                <div id="content">
                    <div class="rounded">
                        <h2>mainBox</h2>
                    <p>这是一行文本，这里作为样例，显示在布局框中。</p>
                    </div>
                    <div class="footer">
                        <p>查看详情信息&gt;&gt;</p>
                    </div>
                    </div>
                </div>
        </body>
    </html>